<template>
  <div class="personnelList">
    <filterPanel filterName="SPersonnelListFilter" filterTitle="人力资源查询" :filterList="filterData"
                 @filterChange="filterChange"></filterPanel>
    <tablePanel tableName="SPersonnelListTable" :tableLoading="loading" tableTitle="人力资源列表" :tableList="tableList"
                :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
    </tablePanel>
    <zyModel :show="showModel" :title="modelTitle" @submit="submit" @close="closeModel">
      <div class="personalChange">
        <zy-modal-info :model-info="modelInfo" :readonly="readonly" cellNum="2"></zy-modal-info>
      </div>
    </zyModel>
  </div>
</template>

<script>
	export default {
		name: "SPersonnelList",
		props: {},
		data() {
			return {
				filterData: [
					{
						title: '姓名',
						name: 'employee_name',
						type: 'input',
						maxlength: '50',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '性别',
						name: 'sex',
						type: 'select',
						optionList: [
							{label: '全部', value: ''},
							{label: '男', value: '1'},
							{label: '女', value: '2'},
						],
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '电话',
						name: 'employee_mobile',
						type: 'input',
						maxlength: '11',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '身份证号',
						name: 'card_no',
						type: 'input',
						maxlength: '20',
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '工作状态',
						name: 'status',
						type: 'select',
						optionList: [
							{label: '全部', value: ''},
							{label: '在职', value: '0'},
							{label: '离职', value: '2'},
							{label: '入职中', value: '2'},
						],
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '审核状态',
						name: 'check_status',
						type: 'select',
						optionList: [
							{label: '全部', value: ''},
							{label: '待审核', value: '0'},
							{label: '已审核', value: '1'},
							{label: '已拒绝', value: '2'},
						],
						value: '',
						isShow: true,
						isSelected: true
					},
					{
						title: '入职时间',
						name: 'time',
						type: 'date',
						value: [],
						isShow: true,
						isSelected: true
					},
				],
				form: {
					employee_name: '',
					sex: '',
					employee_mobile: '',
					card_no: '',
					status: "",
					time: [],
					page_start: 1,
					page_size: 10
				},
				loading: false,
				tableList: [
					{
						title: '姓名',
						width: 120,
						name: 'employee_name',
						isShow: true,
						isSelected: true
					},
					{
						title: '性别',
						width: 120,
						name: 'sex',
						isShow: true,
						isSelected: true
					},
					{
						title: '电话',
						width: 120,
						name: 'employee_mobile',
						isShow: true,
						isSelected: true
					},
					{
						title: '入职时间',
						width: 120,
						name: 'create_time_vis',
						isShow: true,
						isSelected: true
					},
					{
						title: '身份证号',
						width: 120,
						name: 'card_no',
						isShow: true,
						isSelected: true
					},
					{
						title: '工作状态',
						width: 120,
						name: 'status',
						isShow: true,
						isSelected: true
					},
					{
						title: '审核状态',
						width: 120,
						name: 'check_status',
						isShow: true,
						isSelected: true
					},
					{
						title: '薪资',
						width: 120,
						name: 'hardmoney',
						isShow: true,
						isSelected: true
					},
					{
						title: '本月提成',
						width: 120,
						name: 'goodmoney',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						width: 200,
						name: 'handler',
						fixed: 'right',
						btns: [
							{
								type: 'look',
								name: '详情'
							},
							{
								type: 'edit',
								name: '修改'
							},
						],
						isSelected: true
					}
				],
				tableData: [],
				total: 0,
				modelTitle: '',
				showModel: false,
				readonly: false,
				modelInfo: [
					{
						title: '姓名',
						name: 'employee_name',
						type: 'input',
						value: '',
						readonly: true,
					},
					{
						title: '性别',
						name: 'sex',
						type: 'select',
						value: '',
						optionList: [
							{label: '保密', value: '0'},
							{label: '男', value: '1'},
							{label: '女', value: '2'},
						],
						readonly: true,
					},
					{
						title: '电话',
						name: 'employee_mobile',
						type: 'input',
						value: '',
						readonly: true,
					},
					{
						title: '身份证号',
						name: 'card_no',
						type: 'input',
						value: '',
						readonly: true,
					},
					{
						title: '工作状态',
						name: 'status',
						type: 'select',
						value: 1,
						optionList: [
							{value: 1, label: "在职"},
							{value: 2, label: "离职"}
						],
						titleClass: 'required'
					},
					{
						title: '薪资',
						name: 'hardmoney',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
					{
						title: '本月提成',
						name: 'goodmoney',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
				],
				employee_id: ''
			};
		},
		computed: {
			postData() {
				let data = {
					...this.form,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size
					}
				};
				if (this.form.time && this.form.time.length > 0) {
					data.job_time_start = this.$Timestamp(this.form.time[0]);
					data.job_time_end = this.$Timestamp(this.form.time[1]);
				}
				delete data.time;
				return data;
			},
		},
		watch: {},
		components: {},
		methods: {
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			filterChange(data) {
				this.form = {...this.form, ...data};
				this.getData();
			},
			getData() {
				this.loading = true;
				this.$axios.post(this.$api.listEmployee, this.postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						let sexList = ["保密", "男", "女"],
							statusList = ['入职中', '在职', '离职'];
						this.tableData = data.list.filter(item => {
							item.look = true;
							item.edit = true;
							item.sex = sexList[item.sex];
							item.status = statusList[item.status];
							return item;
						});
						this.total = data.pagination.total_count || 0;
					} else {
						this.total = 0;
						this.tableData = [];
					}
				}).catch(ret => {
					this.loading = false;
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			tableClick(data, type) {
				switch (type) {
					case 'look':
						this.modelTitle = '详情';
						this.readonly = true;
						this.getDetail(data.employee_id, type);
						break;
					case 'edit':
						this.modelTitle = '修改';
						this.readonly = false;
						this.getDetail(data.employee_id, type);
						break;
				}
				this.type = type;
				this.showModel = true;
				this.employee_id = data.employee_id;
			},
			getDetail(employee_id, type) {
				this.$axios.post(this.$api.detailEmployee, {
					employee_id: employee_id
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						let sexList = ["保密", "男", "女"],
							statusList = ['入职中', '在职', '离职'];
						this.modelInfo = this.modelInfo.filter(item => {
								console.log(type, item.name)
								if (type === 'look' && (item.name === 'status' || item.name === 'hardmoney' || item.name === 'goodmoney')) {
									item.titleClass = ''
								}
								if (type === 'edit' && (item.name === 'status' || item.name === 'hardmoney' || item.name === 'goodmoney')) {
									item.titleClass = 'required'
								}
								for (var key in data) {
									if (item.name === key) {
										item.value = data[item.name];
									}
								}

								switch (item.name) {
									case "sex":
										item.value = sexList[item.value];
										break;
									case "status":
										if (this.type === 'look') {
											item.value = statusList[item.value];
										}
										break;
								}
								return item
							}
						);
					} else {
						this.$message.error(msg);
						this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			submit() {
				let postData = {
					employee_id: this.employee_id
				};
				this.modelInfo.forEach(item => {
					if (!item.readonly) {
						postData[item.name] = item.value;
					}
				});

				this.$axios.post(this.$api.editEmployee, {
					...postData
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.closeModel();
						this.getData();
					} else {
						this.$message.error(msg);
						this.tableData = [];
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			closeModel() {
				this.showModel = false;
			}
		},
		mounted() {
			this.getData();
		}
		,
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/personnel/personnelList/index.less">

</style>
